import React, { Component } from 'react'
import PubSub from 'pubsub-js'

export default class Search extends Component {

    search = async () => {
        //获取用户的输入(连续结构赋值)+重命名
        const {keyWordElement:{value:keyWord}} = this;
        //发送求情前通知List更新状态
        PubSub.publish('search',{isFirst:false,isLoading:true});
        //发送网络请求
        try{
            const response = await fetch(`https://api.github.com/search/users?q=${keyWord}`)
            const data = await response.json()
            PubSub.publish('search',{isLoading:false,users:data.items});
            
        }catch(error) {
            console.log('请求出错',error)
            PubSub.publish('search',{isLoading:false,err:error.message});
        }
    }

    render() {
    return (
        <section className = 'jumbotron'>
            <h3 className='jumbotron-heading'>Search GitHub Users</h3>
            <div>
            <input ref={node => this.keyWordElement = node} type='text' placeholder='enter the name your search'/>&nbsp;
            <button onClick={this.search}>Search</button>
            </div>
        </section>
    )
    }
}
